<!--  可拖动的正方体 -->
<template>
<div>
  <h1>可拖动的正方体</h1>
  <div ref="webgl" ></div>
</div>

</template>

<script setup>
import {onMounted, getCurrentInstance} from "vue";
import * as THREE from "three";
import {OrbitControls} from "three/addons/controls/OrbitControls.js";
const {proxy} = getCurrentInstance();


/**
 * ·· 初始化场景
 */
// 创建3D场景对象Scene
const scene = new THREE.Scene();
// 实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera(25,1, 0.1, 50);
// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
//设置网格模型在三维空间中的位置坐标，默认是坐标原点
renderer.setSize(200, 200);
//创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry();
//创建一个材质对象Material
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
// 两个参数分别为几何体geometry、材质material
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

const controls = new OrbitControls(camera, renderer.domElement);

onMounted(() => {
  document.body.appendChild(renderer.domElement);
  proxy.$refs.webgl.appendChild(renderer.domElement);
  animate();
});
/**
 *  ·· 动画
 */
  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    controls.update();
  }
</script>

<style scoped>

</style>
